<template>
  <el-card>
    <el-row>
      <el-form :inline="true" :model="queryVo" size="default"  v-auth="'system-log-login-query'">
        <el-form-item label="用户名称">
          <el-input v-model="queryVo.loginUsername" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryVo.state" placeholder="请选择登录状态">
            <el-option
                v-for="item in stateOptions"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getList" v-auth="'system-log-login-query'">查询</el-button>
          <el-button size="small" type="default" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item/>
      </el-form>
    </el-row>

    <el-row>
      <el-popconfirm title="确定清空吗？" @confirm="logDelete">
        <template #reference>
          <el-button size="small" type="danger" v-auth="'system-log-login-delete'">
            <el-icon>
              <ele-Delete/>
            </el-icon>
            日志清空
          </el-button>
        </template>
      </el-popconfirm>
    </el-row>

    <el-row class="mt10">
      <el-table :data="logList"
                v-loading="loding"
      >
        <el-table-column prop="loginUsername" label="登陆用户" align="center"/>
        <el-table-column prop="loginTime" label="登录时间" align="center"/>
        <el-table-column prop="ipAddr" label="登录IP" align="center"/>
        <el-table-column prop="ipSources" label="登陆地点" align="center"/>
        <el-table-column prop="browerName" label="浏览器" align="center"/>
        <el-table-column prop="systemName" label="系统名称" align="center"/>
        <el-table-column label="登录状态" align="center">
          <template #default="scope">
            <el-tag size="small"
                    v-for="(item,index) in stateOptions"
                    v-show="item.dictValue==scope.row.loginState"
                    :key="index"
                    :type="item.dictValue=='0'?'success':'warning'" v-text="item.dictLabel"></el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-link type="primary" title="查看" @click="showDetailView(scope.row)" v-auth="'system-role-update'">
              <el-icon>
                <ele-View/>
              </el-icon>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt15"
          style="justify-content: flex-end;"
          v-model:currentPage="queryVo.current"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
      />
    </el-row>

    <el-dialog
        v-model="dialogVisible"
        top="20px"
        title="日志详情"
        width="30%"
    >
      <el-descriptions :column="1">
        <el-descriptions-item label="用户名">{{ currentShowLog.loginUsername }}</el-descriptions-item>
        <el-descriptions-item label="登录时间">{{ currentShowLog.loginTime }}</el-descriptions-item>
        <el-descriptions-item label="登录IP">{{ currentShowLog.ipAddr }}</el-descriptions-item>
        <el-descriptions-item label="登陆地点">{{ currentShowLog.ipSources }}</el-descriptions-item>
        <el-descriptions-item label="浏览器">{{ currentShowLog.browerName }}</el-descriptions-item>
        <el-descriptions-item label="系统名称">{{ currentShowLog.systemName }}</el-descriptions-item>
        <el-descriptions-item label="系统名称">{{ currentShowLog.systemName }}</el-descriptions-item>
        <el-descriptions-item label="消息">{{ currentShowLog.loginResult }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small"
                  v-for="(item,index) in stateOptions"
                  v-show="item.dictValue==currentShowLog.loginState"
                  :key="index"
                  :type="item.dictValue=='0'?'success':'warning'" v-text="item.dictLabel"></el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>

      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import {queryList,deleteLoginLog} from "/@/api/system/log/loginlog";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance()
const queryVo =reactive({
  current:1,
  pageSize:10,
  loginUsername:undefined,
  state:undefined
})
const logList = ref([])
const loding=ref(true)
const dialogVisible=ref(false)
const total=ref(0)
const getList= async ()=>{
  loding.value = true
  await queryList(queryVo).then(res => {
    logList.value = res.data.rows
    total.value=res.data.pageTotal
    loding.value = false
  })
}
const logDelete= async ()=>{
  await deleteLoginLog().then(res => {
    ElMessage.success(res.msg)
    getList()
  })
}
const resetQuery=()=>{
  queryVo.loginUsername=undefined
  queryVo.state=undefined
  getList()
}
let currentShowLog=reactive({})


const stateOptions =ref([])
const showDetailView =(node)=>{
  currentShowLog.loginUsername = node.loginUsername
  currentShowLog.loginTime = node.loginTime
  currentShowLog.ipAddr = node.ipAddr
  currentShowLog.ipSources = node.ipSources
  currentShowLog.browerName = node.browerName
  currentShowLog.systemName = node.systemName
  currentShowLog.loginResult = node.loginResult
  currentShowLog.loginState = node.loginState
  dialogVisible.value = true
}

onBeforeMount(()=>{
  proxy.$dictOptions('system_sucess_fail').then(res => {
    stateOptions.value = res.data
  })
  getList()
})

</script>

<style scoped>

</style>